//获取项目目录
const path = require('path')
//导入在内存中生成html页面的插件
const htmlWebpackPlugin = require('html-webpack-plugin')
//导入vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    //js生成的入口文件
    entry : path.join(__dirname,'./src/main.js'),
    //生成出口文件目录
    output : {
        path : path.join(__dirname,'./dist'),
        filename : 'bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            //配置要生成的目录
            template : path.join(__dirname,"./src/index.html"),
            //配置生成到内存成功的文件名称
            filename : "index.html"
        }),
        new VueLoaderPlugin()
    ],
    //这个节点，用户配置所有的第三方模块的加载器
    module:{
        //所有的第三方模块的匹配规则
        rules:[
            //匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']},//使用.css文件
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置less的执行规则
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//配置scss的执行规则
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:['url-loader?limit=21370&name=[hash:8]-[name].[ext]']},//配置图片的执行规则
            {test:/\.(ttf|woff|eot|svg|woff2)$/,use:['url-loader']},//配置字体加载器
            //只处理node_moduels文件夹以外的js文件
            {test:/\.js$/,use:'babel-loader', exclude: /node_modules/},//配置babel加载器
            {test:/\.vue$/,use:'vue-loader'} //vue加载器,主要解析后缀为vue文件
        ]
    },
    resolve:{
        //给main.js中import包时，以vue结尾的对应的路径，例如“import Vue from 'vue'”
        alias :{
            "vue$":"vue/dist/vue.js"
        }
    }
}